<template>
  <div class="cancel-management-popup-box">
    <!-- 调整原因 -->
    <div class="edit-cause-box">
      <div class="text">
        <span>取消原因：</span>
      </div>
      <div class="input-box">
        <el-input
          type="textarea"
          :autosize="{ minRows: 2, maxRows:4}"
          placeholder="请输入内容"
          v-model="formData.reason"
        ></el-input>
      </div>
    </div>
    <!-- 按钮 -->
    <div class="btn-box centerbox">
      <el-button type="primary" @click="operate" class="save-btn centerbox">保存并下发</el-button>
      <el-button type="primary" @click="cancel" class="cancel-btn centerbox">取消</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
// 表格隔行变色的参数
export interface objType {
  row: object;
  rowIndex: number;
}
@Component
export default class extends Vue {
  @Prop({ default: () => [] })
  tableSelect!: any[];
  //搜索框from表单数据
  formData = {
    reason: "", // 取消原因
  };
  // 纯提示消息
  private totast(msg: string) {
    this.$message({
      message: msg,
      duration: 0,
      showClose: true,
      type: "warning",
    });
  }
  // 带按钮的提示消息
  private totastBtn(msg: string) {
    this.$confirm(msg, "确认", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "info",
    })
      .then(() => {
        // 确定
      })
      .catch(() => {
        // 取消
      });
  }
  // 加载中
  private loading(str: string) {
    let loading = this.$loading({
      lock: true,
      text: str,
      spinner: "el-icon-loading",
      background: "rgba(0,0,0,0.7)",
    });
    setTimeout(() => {
      loading.close();
    }, 2000);
  }
  // 操作
  operate() {
    // czlx操作类型，计划调整：jhtz，计划取消:jhqx
    // console.log("保存1111:", this.formData);
    // console.log("保存3333:", this.tableSelect);
    var bz = this.formData;
    if (bz.reason == "") {
      this.totast("取消原因不能为空！");
      return;
    }
    let loading = this.$loading({
      lock: true,
      text: "系统加载中，请稍后...",
      spinner: "el-icon-loading",
      background: "rgba(0,0,0,0.7)",
    });
    this.loading("系统加载中，请稍后...");
    this.tableSelect.map((v: any, i: any) => {
      let form = {
        bz: this.formData.reason,
        jhids: v.ID,
        xslxs: v.XSLX,
      };
      // 计划取消
      (this as any).$services
        .getplanCancle({
          method: "get",
          data: form,
        })
        .then((result: any) => {
          // console.log("计划取消回调:", result);
          if (result.success) {
            if (result.data.close == "true") {
              this.totastBtn(result.data.msg);
            } else {
              this.totastBtn(result.data.msg);
            }
            this.cancel();
          } else {
            this.totast("保存和下发异常，请稍后重试!");
          }
        })
        .catch((err: object) => {
          console.log(err);
        });
    });
  }
  cancel() {
    this.$emit("handleClose");
    // console.log("取消");
  }
}
</script>

<style lang="scss" scoped>
.cancel-management-popup-box {
  width: 100%;
  height: 100%;
  .edit-cause-box {
    height: 0.95rem;
    margin-top: 0.22rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .text {
      width: 0.94rem;
      height: 100%;
      span {
        font-size: 0.18rem;
      }
    }
    .input-box {
      width: 6.95rem;
      height: 100%;
      font-size: 0.18rem;
      .el-textarea {
        overflow: auto;
        .el-textarea__inner::-webkit-scrollbar {
          width: 10px;
          height: 10px;
        }
        .el-textarea__inner::-webkit-scrollbar-thumb {
          background: #03bcfe;
          border-radius: 5px;
        }
        .el-textarea__inner::-webkit-scrollbar-track {
          background: #223e87;
          border-radius: 2px;
        }
      }
    }
  }
  .btn-box {
    height: 0.36rem;
    margin-top: 0.33rem;
    .save-btn {
      // margin-right: 0.86rem;
    }
    .cancel-btn {
      margin-left: 0.18rem;
    }
  }
}
</style>

